<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>色彩设计 | FEI-UI-DESIGN</title>
    
    <meta name="generator" content="VitePress v1.0.0-rc.35">
    <link rel="preload stylesheet" href="/fei-ui-design/assets/style.UepqEusw.css" as="style">
    
    <script type="module" src="/fei-ui-design/assets/app.CtN_OfgH.js"></script>
    <link rel="preload" href="/fei-ui-design/assets/inter-roman-latin.bvIUbFQP.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/framework.hV4g2dZ1.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/theme.XkHReBMm.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/guide_color-design.md.cVmivjOg.lean.js">
    <link rel="icon" href="/fei-ui-design/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
    <meta name="author" content="ymf">
    <meta name="google" content="nositelinkssearchbox">
    <meta hid="description" name="description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:title" content="FEI-UI-DESIGN - Framework for Vuejs">
    <meta name="twitter:card" content="summary_large_image">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body><div aria-hidden="true" class="fei-color-picker__panel fei-color-dropdown undefined fei-popper is-light" style="z-index:2217;display:none;" id="fei-popper-4183" role="tooltip"><!--[--><div><div class="fei-color-dropdown__main-wrapper"><div class="fei-color-hue-slider is-vertical hue-slider"><div class="fei-color-hue-slider__bar"></div><div class="fei-color-hue-slider__thumb" style="left:0px;top:0px;"></div></div><div class="fei-color-svpanel" style="background-color:hsl(0, 100%, 50%);"><div class="fei-color-svpanel__white"></div><div class="fei-color-svpanel__black"></div><div class="fei-color-svpanel__cursor" style="top:0px;left:0px;"><div></div></div></div></div><!----><div class="fei-color-predefine"><div class="fei-color-predefine__colors"><!--[--><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(26, 92, 255, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(70, 201, 58, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(255, 186, 0, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(255, 71, 87, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(47, 84, 235, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(250, 173, 20, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(114, 46, 209, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(235, 47, 150, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(19, 194, 194, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(250, 219, 20, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(160, 217, 17, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(250, 84, 28, 1);"></div></div><div class="fei-color-predefine__color-selector"><div style="background-color:rgba(0, 188, 212, 1);"></div></div><!--]--></div></div><div class="fei-color-dropdown__btns"><span class="fei-color-dropdown__value"><div class="fei-input-wrapper fei-input-wrapper-mini fei-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="fei-input fei-input-mini" placeholder="" value="" number="false"><!----><!----><!----><!----><!----><!--]--></div></span><button class="fei-button fei-button--mini fei-button--text fei-color-dropdown__link-btn" type="button"><!----><span class="fei-button__content" style=""><!--[--> 清空 <!--]--></span></button><button class="fei-button fei-button--primary fei-button--mini fei-color-dropdown__btn" type="button"><!----><span class="fei-button__content" style=""><!--[--> 确定 <!--]--></span></button></div></div><!--]--><!----></div><!--teleport anchor-->
    <div id="app"><div id="app" class="theme-container" data-v-818e4420><!----><div class="sidebar-mask" data-v-818e4420></div><main class="page" data-v-818e4420><header class="header-page"><a class="back-link"><i class="bx bx-left-arrow-alt"></i></a><div class="header__content"><div class="flex-header"><h1 id="header-title">色彩设计</h1><ul class="interactive-links"><li title="Package NPM"><a target="_blank" href="https://www.npmjs.com/package/fei-ui-design"><i class="bx bx-package"></i></a></li><li title="View Code Github"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design"><i class="bx bx-code-alt"></i></a></li><li title="Edit Page"><a target="_blank"><i class="bx bx-edit"></i></a></li><li title="Report a Bug"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues/new?title=[色彩设计] - Your Bug Name&amp;body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe 色彩设计 should do this%0A%0A**Result**%0AThe 色彩设计 does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/exmple-bug/1/"><i class="bx bx-bug"></i></a></li></ul></div></div><svg class="header-effect" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)" fill="#fff"></path></svg></header><aside class="sidebar"><div class="content-sidebar"><ul class="sidebar-sub-headers"><!--[--><!--]--></ul></div></aside><!--[--><!--]--><div class="vp-doc content__default"><div style="position:relative;"><div data-v-d4b5f8bc><div class="card" data-v-d4b5f8bc><div class="text"><!--[--><h1 id="色彩设计" tabindex="-1" data-v-d4b5f8bc>色彩设计 <a class="header-anchor" href="#色彩设计" aria-label="Permalink to &quot;色彩设计&quot;" data-v-d4b5f8bc>​</a></h1><h5 id="f-ui-design-默认具有一套较为美观的配色方案-在开发中也推荐使用一下色板来达到视觉统一效果" tabindex="-1" data-v-d4b5f8bc>F-UI-Design 默认具有一套较为美观的配色方案，在开发中也推荐使用一下色板来达到视觉统一效果 <a class="header-anchor" href="#f-ui-design-默认具有一套较为美观的配色方案-在开发中也推荐使用一下色板来达到视觉统一效果" aria-label="Permalink to &quot;F-UI-Design 默认具有一套较为美观的配色方案，在开发中也推荐使用一下色板来达到视觉统一效果&quot;" data-v-d4b5f8bc>​</a></h5><h2 id="设计原则" tabindex="-1" data-v-d4b5f8bc>设计原则 <a class="header-anchor" href="#设计原则" aria-label="Permalink to &quot;设计原则&quot;" data-v-d4b5f8bc>​</a></h2><p data-v-d4b5f8bc>默认的色彩样式有5个主色调，并根据白色混入得到了若干个色板值，这些颜色基本可以满足中后台设计中对于颜色的要求</p><p data-v-d4b5f8bc>颜色值的取值混合主要参考stylus的mix混合，js部分借助 <a href="https://www.npmjs.com/package/color" target="_blank" rel="noreferrer" data-v-d4b5f8bc>color.js</a> 这个第三方库实现，组件中提供了部分转化函数，可以按需引入。</p><h2 id="主色" tabindex="-1" data-v-d4b5f8bc>主色 <a class="header-anchor" href="#主色" aria-label="Permalink to &quot;主色&quot;" data-v-d4b5f8bc>​</a></h2><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#103799;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-1</span><span data-v-d4b5f8bc>#103799</span></div><div class="item" title="click to copy color" style="color:#fff;background:#1240b3;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-2</span><span data-v-d4b5f8bc>#1240b3</span></div><div class="item" title="click to copy color" style="color:#fff;background:#154acc;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-3</span><span data-v-d4b5f8bc>#154acc</span></div><div class="item" title="click to copy color" style="color:#fff;background:#1753e6;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-4</span><span data-v-d4b5f8bc>#1753e6</span></div><div class="item" title="click to copy color" style="color:#fff;background:#1a5cff;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-5</span><span data-v-d4b5f8bc>#1a5cff</span></div><div class="item" title="click to copy color" style="color:#333;background:#487dff;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-6</span><span data-v-d4b5f8bc>#487dff</span></div><div class="item" title="click to copy color" style="color:#333;background:#769dff;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-7</span><span data-v-d4b5f8bc>#769dff</span></div><div class="item" title="click to copy color" style="color:#333;background:#a3beff;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-8</span><span data-v-d4b5f8bc>#a3beff</span></div><div class="item" title="click to copy color" style="color:#333;background:#d1deff;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-9</span><span data-v-d4b5f8bc>#d1deff</span></div><div class="item" title="click to copy color" style="color:#333;background:#e8efff;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-10</span><span data-v-d4b5f8bc>#e8efff</span></div><div class="item" title="click to copy color" style="color:#333;background:#f4f7ff;" data-v-d4b5f8bc><span data-v-d4b5f8bc>primary-11</span><span data-v-d4b5f8bc>#f4f7ff</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#2a7923;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-1</span><span data-v-d4b5f8bc>#2a7923</span></div><div class="item" title="click to copy color" style="color:#fff;background:#318d29;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-2</span><span data-v-d4b5f8bc>#318d29</span></div><div class="item" title="click to copy color" style="color:#fff;background:#38a12e;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-3</span><span data-v-d4b5f8bc>#38a12e</span></div><div class="item" title="click to copy color" style="color:#fff;background:#3fb534;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-4</span><span data-v-d4b5f8bc>#3fb534</span></div><div class="item" title="click to copy color" style="color:#fff;background:#46c93a;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-5</span><span data-v-d4b5f8bc>#46c93a</span></div><div class="item" title="click to copy color" style="color:#333;background:#6bd461;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-6</span><span data-v-d4b5f8bc>#6bd461</span></div><div class="item" title="click to copy color" style="color:#333;background:#90df89;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-7</span><span data-v-d4b5f8bc>#90df89</span></div><div class="item" title="click to copy color" style="color:#333;background:#b5e9b0;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-8</span><span data-v-d4b5f8bc>#b5e9b0</span></div><div class="item" title="click to copy color" style="color:#333;background:#daf4d8;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-9</span><span data-v-d4b5f8bc>#daf4d8</span></div><div class="item" title="click to copy color" style="color:#333;background:#edfaeb;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-10</span><span data-v-d4b5f8bc>#edfaeb</span></div><div class="item" title="click to copy color" style="color:#333;background:#f6fcf5;" data-v-d4b5f8bc><span data-v-d4b5f8bc>success-11</span><span data-v-d4b5f8bc>#f6fcf5</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#121212;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-1</span><span data-v-d4b5f8bc>#121212</span></div><div class="item" title="click to copy color" style="color:#fff;background:#151515;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-2</span><span data-v-d4b5f8bc>#151515</span></div><div class="item" title="click to copy color" style="color:#fff;background:#181818;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-3</span><span data-v-d4b5f8bc>#181818</span></div><div class="item" title="click to copy color" style="color:#fff;background:#1b1b1b;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-4</span><span data-v-d4b5f8bc>#1b1b1b</span></div><div class="item" title="click to copy color" style="color:#fff;background:#1e1e1e;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-5</span><span data-v-d4b5f8bc>#1e1e1e</span></div><div class="item" title="click to copy color" style="color:#333;background:#4b4b4b;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-6</span><span data-v-d4b5f8bc>#4b4b4b</span></div><div class="item" title="click to copy color" style="color:#333;background:#787878;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-7</span><span data-v-d4b5f8bc>#787878</span></div><div class="item" title="click to copy color" style="color:#333;background:#a5a5a5;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-8</span><span data-v-d4b5f8bc>#a5a5a5</span></div><div class="item" title="click to copy color" style="color:#333;background:#d2d2d2;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-9</span><span data-v-d4b5f8bc>#d2d2d2</span></div><div class="item" title="click to copy color" style="color:#333;background:#e9e9e9;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-10</span><span data-v-d4b5f8bc>#e9e9e9</span></div><div class="item" title="click to copy color" style="color:#333;background:#f4f4f4;" data-v-d4b5f8bc><span data-v-d4b5f8bc>info-11</span><span data-v-d4b5f8bc>#f4f4f4</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#997000;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-1</span><span data-v-d4b5f8bc>#997000</span></div><div class="item" title="click to copy color" style="color:#fff;background:#b38200;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-2</span><span data-v-d4b5f8bc>#b38200</span></div><div class="item" title="click to copy color" style="color:#fff;background:#cc9500;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-3</span><span data-v-d4b5f8bc>#cc9500</span></div><div class="item" title="click to copy color" style="color:#fff;background:#e6a700;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-4</span><span data-v-d4b5f8bc>#e6a700</span></div><div class="item" title="click to copy color" style="color:#fff;background:#ffba00;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-5</span><span data-v-d4b5f8bc>#ffba00</span></div><div class="item" title="click to copy color" style="color:#333;background:#ffc833;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-6</span><span data-v-d4b5f8bc>#ffc833</span></div><div class="item" title="click to copy color" style="color:#333;background:#ffd666;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-7</span><span data-v-d4b5f8bc>#ffd666</span></div><div class="item" title="click to copy color" style="color:#333;background:#ffe399;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-8</span><span data-v-d4b5f8bc>#ffe399</span></div><div class="item" title="click to copy color" style="color:#333;background:#fff1cc;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-9</span><span data-v-d4b5f8bc>#fff1cc</span></div><div class="item" title="click to copy color" style="color:#333;background:#fff8e6;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-10</span><span data-v-d4b5f8bc>#fff8e6</span></div><div class="item" title="click to copy color" style="color:#333;background:#fffcf2;" data-v-d4b5f8bc><span data-v-d4b5f8bc>warning-11</span><span data-v-d4b5f8bc>#fffcf2</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#992b34;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-1</span><span data-v-d4b5f8bc>#992b34</span></div><div class="item" title="click to copy color" style="color:#fff;background:#b3323d;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-2</span><span data-v-d4b5f8bc>#b3323d</span></div><div class="item" title="click to copy color" style="color:#fff;background:#cc3946;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-3</span><span data-v-d4b5f8bc>#cc3946</span></div><div class="item" title="click to copy color" style="color:#fff;background:#e6404e;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-4</span><span data-v-d4b5f8bc>#e6404e</span></div><div class="item" title="click to copy color" style="color:#fff;background:#ff4757;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-5</span><span data-v-d4b5f8bc>#ff4757</span></div><div class="item" title="click to copy color" style="color:#333;background:#ff6c79;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-6</span><span data-v-d4b5f8bc>#ff6c79</span></div><div class="item" title="click to copy color" style="color:#333;background:#ff919a;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-7</span><span data-v-d4b5f8bc>#ff919a</span></div><div class="item" title="click to copy color" style="color:#333;background:#ffb5bc;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-8</span><span data-v-d4b5f8bc>#ffb5bc</span></div><div class="item" title="click to copy color" style="color:#333;background:#ffdadd;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-9</span><span data-v-d4b5f8bc>#ffdadd</span></div><div class="item" title="click to copy color" style="color:#333;background:#ffedee;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-10</span><span data-v-d4b5f8bc>#ffedee</span></div><div class="item" title="click to copy color" style="color:#333;background:#fff6f7;" data-v-d4b5f8bc><span data-v-d4b5f8bc>danger-11</span><span data-v-d4b5f8bc>#fff6f7</span></div><!--]--></div><h2 id="自定义色板" tabindex="-1" data-v-d4b5f8bc>自定义色板 <a class="header-anchor" href="#自定义色板" aria-label="Permalink to &quot;自定义色板&quot;" data-v-d4b5f8bc>​</a></h2><p data-v-d4b5f8bc>如果自定的配色不能满足要求，则可以取如下色板，默认会给生成不同的色板值，可供使用</p><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#441c7d;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-1</span><span data-v-d4b5f8bc>#441c7d</span></div><div class="item" title="click to copy color" style="color:#fff;background:#502092;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-2</span><span data-v-d4b5f8bc>#502092</span></div><div class="item" title="click to copy color" style="color:#fff;background:#5b25a7;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-3</span><span data-v-d4b5f8bc>#5b25a7</span></div><div class="item" title="click to copy color" style="color:#fff;background:#6729bc;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-4</span><span data-v-d4b5f8bc>#6729bc</span></div><div class="item" title="click to copy color" style="color:#fff;background:#722ed1;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-5</span><span data-v-d4b5f8bc>#722ed1</span></div><div class="item" title="click to copy color" style="color:#333;background:#8e58da;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-6</span><span data-v-d4b5f8bc>#8e58da</span></div><div class="item" title="click to copy color" style="color:#333;background:#aa82e3;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-7</span><span data-v-d4b5f8bc>#aa82e3</span></div><div class="item" title="click to copy color" style="color:#333;background:#c7abed;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-8</span><span data-v-d4b5f8bc>#c7abed</span></div><div class="item" title="click to copy color" style="color:#333;background:#e3d5f6;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-9</span><span data-v-d4b5f8bc>#e3d5f6</span></div><div class="item" title="click to copy color" style="color:#333;background:#f1eafa;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-10</span><span data-v-d4b5f8bc>#f1eafa</span></div><div class="item" title="click to copy color" style="color:#333;background:#f8f5fd;" data-v-d4b5f8bc><span data-v-d4b5f8bc>purple-11</span><span data-v-d4b5f8bc>#f8f5fd</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#8d1c5a;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-1</span><span data-v-d4b5f8bc>#8d1c5a</span></div><div class="item" title="click to copy color" style="color:#fff;background:#a52169;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-2</span><span data-v-d4b5f8bc>#a52169</span></div><div class="item" title="click to copy color" style="color:#fff;background:#bc2678;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-3</span><span data-v-d4b5f8bc>#bc2678</span></div><div class="item" title="click to copy color" style="color:#fff;background:#d42a87;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-4</span><span data-v-d4b5f8bc>#d42a87</span></div><div class="item" title="click to copy color" style="color:#fff;background:#eb2f96;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-5</span><span data-v-d4b5f8bc>#eb2f96</span></div><div class="item" title="click to copy color" style="color:#333;background:#ef59ab;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-6</span><span data-v-d4b5f8bc>#ef59ab</span></div><div class="item" title="click to copy color" style="color:#333;background:#f382c0;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-7</span><span data-v-d4b5f8bc>#f382c0</span></div><div class="item" title="click to copy color" style="color:#333;background:#f7acd5;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-8</span><span data-v-d4b5f8bc>#f7acd5</span></div><div class="item" title="click to copy color" style="color:#333;background:#fbd5ea;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-9</span><span data-v-d4b5f8bc>#fbd5ea</span></div><div class="item" title="click to copy color" style="color:#333;background:#fdeaf5;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-10</span><span data-v-d4b5f8bc>#fdeaf5</span></div><div class="item" title="click to copy color" style="color:#333;background:#fef5fa;" data-v-d4b5f8bc><span data-v-d4b5f8bc>magenta-11</span><span data-v-d4b5f8bc>#fef5fa</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#0b7474;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-1</span><span data-v-d4b5f8bc>#0b7474</span></div><div class="item" title="click to copy color" style="color:#fff;background:#0d8888;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-2</span><span data-v-d4b5f8bc>#0d8888</span></div><div class="item" title="click to copy color" style="color:#fff;background:#0f9b9b;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-3</span><span data-v-d4b5f8bc>#0f9b9b</span></div><div class="item" title="click to copy color" style="color:#fff;background:#11afaf;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-4</span><span data-v-d4b5f8bc>#11afaf</span></div><div class="item" title="click to copy color" style="color:#fff;background:#13c2c2;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-5</span><span data-v-d4b5f8bc>#13c2c2</span></div><div class="item" title="click to copy color" style="color:#333;background:#42cece;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-6</span><span data-v-d4b5f8bc>#42cece</span></div><div class="item" title="click to copy color" style="color:#333;background:#71dada;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-7</span><span data-v-d4b5f8bc>#71dada</span></div><div class="item" title="click to copy color" style="color:#333;background:#a1e7e7;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-8</span><span data-v-d4b5f8bc>#a1e7e7</span></div><div class="item" title="click to copy color" style="color:#333;background:#d0f3f3;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-9</span><span data-v-d4b5f8bc>#d0f3f3</span></div><div class="item" title="click to copy color" style="color:#333;background:#e7f9f9;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-10</span><span data-v-d4b5f8bc>#e7f9f9</span></div><div class="item" title="click to copy color" style="color:#333;background:#f3fcfc;" data-v-d4b5f8bc><span data-v-d4b5f8bc>cyan-11</span><span data-v-d4b5f8bc>#f3fcfc</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#60820a;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-1</span><span data-v-d4b5f8bc>#60820a</span></div><div class="item" title="click to copy color" style="color:#fff;background:#70980c;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-2</span><span data-v-d4b5f8bc>#70980c</span></div><div class="item" title="click to copy color" style="color:#fff;background:#80ae0e;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-3</span><span data-v-d4b5f8bc>#80ae0e</span></div><div class="item" title="click to copy color" style="color:#fff;background:#90c30f;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-4</span><span data-v-d4b5f8bc>#90c30f</span></div><div class="item" title="click to copy color" style="color:#fff;background:#a0d911;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-5</span><span data-v-d4b5f8bc>#a0d911</span></div><div class="item" title="click to copy color" style="color:#333;background:#b3e141;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-6</span><span data-v-d4b5f8bc>#b3e141</span></div><div class="item" title="click to copy color" style="color:#333;background:#c6e870;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-7</span><span data-v-d4b5f8bc>#c6e870</span></div><div class="item" title="click to copy color" style="color:#333;background:#d9f0a0;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-8</span><span data-v-d4b5f8bc>#d9f0a0</span></div><div class="item" title="click to copy color" style="color:#333;background:#ecf7cf;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-9</span><span data-v-d4b5f8bc>#ecf7cf</span></div><div class="item" title="click to copy color" style="color:#333;background:#f6fbe7;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-10</span><span data-v-d4b5f8bc>#f6fbe7</span></div><div class="item" title="click to copy color" style="color:#333;background:#fafdf3;" data-v-d4b5f8bc><span data-v-d4b5f8bc>lime-11</span><span data-v-d4b5f8bc>#fafdf3</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#963211;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-1</span><span data-v-d4b5f8bc>#963211</span></div><div class="item" title="click to copy color" style="color:#fff;background:#af3b14;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-2</span><span data-v-d4b5f8bc>#af3b14</span></div><div class="item" title="click to copy color" style="color:#fff;background:#c84316;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-3</span><span data-v-d4b5f8bc>#c84316</span></div><div class="item" title="click to copy color" style="color:#fff;background:#e14c19;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-4</span><span data-v-d4b5f8bc>#e14c19</span></div><div class="item" title="click to copy color" style="color:#fff;background:#fa541c;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-5</span><span data-v-d4b5f8bc>#fa541c</span></div><div class="item" title="click to copy color" style="color:#333;background:#fb7649;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-6</span><span data-v-d4b5f8bc>#fb7649</span></div><div class="item" title="click to copy color" style="color:#333;background:#fc9877;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-7</span><span data-v-d4b5f8bc>#fc9877</span></div><div class="item" title="click to copy color" style="color:#333;background:#fdbba4;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-8</span><span data-v-d4b5f8bc>#fdbba4</span></div><div class="item" title="click to copy color" style="color:#333;background:#feddd2;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-9</span><span data-v-d4b5f8bc>#feddd2</span></div><div class="item" title="click to copy color" style="color:#333;background:#ffeee8;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-10</span><span data-v-d4b5f8bc>#ffeee8</span></div><div class="item" title="click to copy color" style="color:#333;background:#fff6f4;" data-v-d4b5f8bc><span data-v-d4b5f8bc>volcano-11</span><span data-v-d4b5f8bc>#fff6f4</span></div><!--]--></div><div class="color-wrap" data-v-d4b5f8bc><!--[--><div class="item" title="click to copy color" style="color:#fff;background:#1c328d;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-1</span><span data-v-d4b5f8bc>#1c328d</span></div><div class="item" title="click to copy color" style="color:#fff;background:#213ba5;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-2</span><span data-v-d4b5f8bc>#213ba5</span></div><div class="item" title="click to copy color" style="color:#fff;background:#2643bc;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-3</span><span data-v-d4b5f8bc>#2643bc</span></div><div class="item" title="click to copy color" style="color:#fff;background:#2a4cd4;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-4</span><span data-v-d4b5f8bc>#2a4cd4</span></div><div class="item" title="click to copy color" style="color:#fff;background:#2f54eb;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-5</span><span data-v-d4b5f8bc>#2f54eb</span></div><div class="item" title="click to copy color" style="color:#333;background:#5976ef;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-6</span><span data-v-d4b5f8bc>#5976ef</span></div><div class="item" title="click to copy color" style="color:#333;background:#8298f3;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-7</span><span data-v-d4b5f8bc>#8298f3</span></div><div class="item" title="click to copy color" style="color:#333;background:#acbbf7;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-8</span><span data-v-d4b5f8bc>#acbbf7</span></div><div class="item" title="click to copy color" style="color:#333;background:#d5ddfb;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-9</span><span data-v-d4b5f8bc>#d5ddfb</span></div><div class="item" title="click to copy color" style="color:#333;background:#eaeefd;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-10</span><span data-v-d4b5f8bc>#eaeefd</span></div><div class="item" title="click to copy color" style="color:#333;background:#f5f6fe;" data-v-d4b5f8bc><span data-v-d4b5f8bc>geekblue-11</span><span data-v-d4b5f8bc>#f5f6fe</span></div><!--]--></div><h2 id="中性色" tabindex="-1" data-v-d4b5f8bc>中性色 <a class="header-anchor" href="#中性色" aria-label="Permalink to &quot;中性色&quot;" data-v-d4b5f8bc>​</a></h2><p data-v-d4b5f8bc>中性色包含了黑、白、灰。在后台设计中被大量使用到，合理地选择中性色能够令页面信息具备良好的主次关关系。</p><div class="main-color" data-v-d4b5f8bc><!--[--><div class="main-color-item" title="click to copy color" style="background:#ffffff;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> gary-1 <span class="main-color-value" data-v-d4b5f8bc>#ffffff</span></div><div class="main-color-item" title="click to copy color" style="background:#fafafa;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> gary-2 <span class="main-color-value" data-v-d4b5f8bc>#fafafa</span></div><div class="main-color-item" title="click to copy color" style="background:#f5f5f5;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> gary-3 <span class="main-color-value" data-v-d4b5f8bc>#f5f5f5</span></div><div class="main-color-item" title="click to copy color" style="background:#f0f0f0;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> gary-4 <span class="main-color-value" data-v-d4b5f8bc>#f0f0f0</span></div><div class="main-color-item" title="click to copy color" style="background:#d9d9d9;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> gary-5 <span class="main-color-value" data-v-d4b5f8bc>#d9d9d9</span></div><div class="main-color-item" title="click to copy color" style="background:#bfbfbf;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> gary-6 <span class="main-color-value" data-v-d4b5f8bc>#bfbfbf</span></div><div class="main-color-item" title="click to copy color" style="background:#8c8c8c;color:#fff;" data-v-d4b5f8bc> gary-7 <span class="main-color-value" data-v-d4b5f8bc>#8c8c8c</span></div><div class="main-color-item" title="click to copy color" style="background:#595959;color:#fff;" data-v-d4b5f8bc> gary-8 <span class="main-color-value" data-v-d4b5f8bc>#595959</span></div><div class="main-color-item" title="click to copy color" style="background:#434343;color:#fff;" data-v-d4b5f8bc> gary-9 <span class="main-color-value" data-v-d4b5f8bc>#434343</span></div><div class="main-color-item" title="click to copy color" style="background:#262626;color:#fff;" data-v-d4b5f8bc> gary-10 <span class="main-color-value" data-v-d4b5f8bc>#262626</span></div><div class="main-color-item" title="click to copy color" style="background:#1f1f1f;color:#fff;" data-v-d4b5f8bc> gary-11 <span class="main-color-value" data-v-d4b5f8bc>#1f1f1f</span></div><div class="main-color-item" title="click to copy color" style="background:#141414;color:#fff;" data-v-d4b5f8bc> gary-12 <span class="main-color-value" data-v-d4b5f8bc>#141414</span></div><div class="main-color-item" title="click to copy color" style="background:#000000;color:#fff;" data-v-d4b5f8bc> gary-13 <span class="main-color-value" data-v-d4b5f8bc>#000000</span></div><!--]--></div><h2 id="文字" tabindex="-1" data-v-d4b5f8bc>文字 <a class="header-anchor" href="#文字" aria-label="Permalink to &quot;文字&quot;" data-v-d4b5f8bc>​</a></h2><p data-v-d4b5f8bc>提供了几个文字颜色，色板中可自己定义使用</p><div class="main-color" data-v-d4b5f8bc><!--[--><div class="main-color-item" title="click to copy color" style="background:#17233d;color:#fff;" data-v-d4b5f8bc> text-1 <span class="main-color-value" data-v-d4b5f8bc>#17233d</span></div><div class="main-color-item" title="click to copy color" style="background:#515a6e;color:#fff;" data-v-d4b5f8bc> text-2 <span class="main-color-value" data-v-d4b5f8bc>#515a6e</span></div><div class="main-color-item" title="click to copy color" style="background:#808695;color:#fff;" data-v-d4b5f8bc> text-3 <span class="main-color-value" data-v-d4b5f8bc>#808695</span></div><div class="main-color-item" title="click to copy color" style="background:#c5c8ce;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> text-4 <span class="main-color-value" data-v-d4b5f8bc>#c5c8ce</span></div><div class="main-color-item" title="click to copy color" style="background:#C0C4CC;color:rgba(0,0,0,.85);" data-v-d4b5f8bc> text-5 <span class="main-color-value" data-v-d4b5f8bc>#C0C4CC</span></div><!--]--></div><h2 id="色板工具" tabindex="-1" data-v-d4b5f8bc>色板工具 <a class="header-anchor" href="#色板工具" aria-label="Permalink to &quot;色板工具&quot;" data-v-d4b5f8bc>​</a></h2><p data-v-d4b5f8bc>如果上面的色板还不能满足你的需求，你可以选择一个主色，这里会生成一个色板。</p><div class="color-palette-pick t-center f-s-22 mb-20" data-v-d4b5f8bc>选择你的主色</div><div class="main-color" data-v-d4b5f8bc><!--[--><div class="main-color-item" title="click to copy color" style="color:#fff;background:#103799;" data-v-d4b5f8bc> color-1 <span class="main-color-value" data-v-d4b5f8bc>#103799</span></div><div class="main-color-item" title="click to copy color" style="color:#fff;background:#1240b3;" data-v-d4b5f8bc> color-2 <span class="main-color-value" data-v-d4b5f8bc>#1240b3</span></div><div class="main-color-item" title="click to copy color" style="color:#fff;background:#154acc;" data-v-d4b5f8bc> color-3 <span class="main-color-value" data-v-d4b5f8bc>#154acc</span></div><div class="main-color-item" title="click to copy color" style="color:#fff;background:#1753e6;" data-v-d4b5f8bc> color-4 <span class="main-color-value" data-v-d4b5f8bc>#1753e6</span></div><div class="main-color-item" title="click to copy color" style="color:#fff;background:#1a5cff;" data-v-d4b5f8bc> color-5 <span class="main-color-value" data-v-d4b5f8bc>#1a5cff</span></div><div class="main-color-item" title="click to copy color" style="color:#333;background:#487dff;" data-v-d4b5f8bc> color-6 <span class="main-color-value" data-v-d4b5f8bc>#487dff</span></div><div class="main-color-item" title="click to copy color" style="color:#333;background:#769dff;" data-v-d4b5f8bc> color-7 <span class="main-color-value" data-v-d4b5f8bc>#769dff</span></div><div class="main-color-item" title="click to copy color" style="color:#333;background:#a3beff;" data-v-d4b5f8bc> color-8 <span class="main-color-value" data-v-d4b5f8bc>#a3beff</span></div><div class="main-color-item" title="click to copy color" style="color:#333;background:#d1deff;" data-v-d4b5f8bc> color-9 <span class="main-color-value" data-v-d4b5f8bc>#d1deff</span></div><div class="main-color-item" title="click to copy color" style="color:#333;background:#e8efff;" data-v-d4b5f8bc> color-10 <span class="main-color-value" data-v-d4b5f8bc>#e8efff</span></div><div class="main-color-item" title="click to copy color" style="color:#333;background:#f4f7ff;" data-v-d4b5f8bc> color-11 <span class="main-color-value" data-v-d4b5f8bc>#f4f7ff</span></div><!--]--></div><div class="mt-20" flex="cross:center" data-v-d4b5f8bc><!--[--><div class="fei-color-picker with-label" aria-describedby="fei-popper-4183" style="width:128px;"><!----><div class="fei-color-picker__label"><input class="label-input" value="#1a5cff" readonly></div><div class="fei-color-picker__trigger"><span class="fei-color-picker__color"><span class="fei-color-picker__color-inner" style="background-color:rgb(255, 0, 0);"></span></span></div></div><!--teleport start--><!--teleport end--><!--]--><span class="ml-10" data-v-d4b5f8bc>#1a5cff</span></div><p class="ml-10 f-color-red f-s-12" data-v-d4b5f8bc>注意：亮度和饱和度建议在70以上，以生成更好的效果</p><div style="height:100px;" data-v-d4b5f8bc></div><!--]--></div><!----><!----></div></div></div></div><footer class="page-edit"><div class="last-updated"><span class="prefix">最后更新: </span><span class="time">2024-01-28 22:48:31</span></div></footer><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/introduction"><span>introduction</span><i class="bx bx-chevron-right"></i></a></span></p></div><!--[--><!--]--><div class="up"><i class="bx bx-chevron-up"></i></div><footer class="footer" data-v-36e8006f><div class="footer__uls" data-v-36e8006f><!--[--><ul data-v-36e8006f><li class="title" data-v-36e8006f>FEI-UI-DESIGN</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>介绍</a></li><li data-v-36e8006f><a target="_blank" href="/guide/installation" data-v-36e8006f>快速上手</a></li><li data-v-36e8006f><a target="_blank" href="/guide/jsx" data-v-36e8006f>指南</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>资源</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>文档</a></li><li data-v-36e8006f><a target="_blank" href="/components/button" data-v-36e8006f>组件</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>帮助</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues" data-v-36e8006f>Github Issues</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design/issues" data-v-36e8006f>Gitee Issues</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>社区</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/" data-v-36e8006f>Github</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design" data-v-36e8006f>Gitee</a></li><!--]--></ul><!--]--></div><div class="copy" data-v-36e8006f><span class="span-copy" data-v-36e8006f> Copyright © 2023 FEI-UI-DESIGN </span><span class="span-lusaxweb" data-v-36e8006f><span data-v-36e8006f> Created By </span><a target="_blank" href="http://lusaxweb.net" data-v-36e8006f>后来@</a></span></div></footer></main><aside class="sidebar" data-v-818e4420><svg class="effect1" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)"></path></svg><div class="content-sidebar"><!--[--><!--]--><ul class="sidebar-links"><!--[--><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>介绍</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/guide/introduction" title class="sidebar-link"><!----> Fei UI Design <!----></a></li><li class=""><a href="/fei-ui-design/guide/changelog" title class="sidebar-link"><!----> 变更日志 <!----></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>快速上手</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/guide/installation" title class="sidebar-link"><!----> 安装 <!----></a></li><li class=""><a href="/fei-ui-design/guide/usage-sfc" title class="sidebar-link"><!----> 在 SFC 中使用 <!----></a></li><li class=""><a href="/fei-ui-design/guide/import-on-demand" title class="sidebar-link"><!----> 按需引入 <!----></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>指南</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/guide/jsx" title class="sidebar-link"><!----> JSX &amp; TSX <!----></a></li><li class="active"><a href="/fei-ui-design/guide/color-design" title class="sidebar-link active"><!----> 色彩设计 <!----></a></li><li class=""><a href="/fei-ui-design/guide/custom-theme" title class="sidebar-link"><!----> 调整主题 <!----></a></li><li class=""><a href="/fei-ui-design/guide/common-css" title class="sidebar-link"><!----> 通用样式 <!----></a></li><li class=""><a href="/fei-ui-design/guide/common-api" title class="sidebar-link"><!----> 帮助函数 <!----></a></li><li class=""><a href="/fei-ui-design/guide/common-directive" title class="sidebar-link"><!----> 组件指令 <!----></a></li><li class=""><a href="/fei-ui-design/guide/common-transition" title class="sidebar-link"><!----> 内置动画 <!----></a></li><!--]--></ul></section></li><!--]--></ul><!--[--><!--]--></div></aside><!----></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_breadcrumb.md\":\"Bg1uZ2l2\",\"components_card.md\":\"5vBOail9\",\"components_back-top.md\":\"NOXjEB41\",\"components_desc.md\":\"NNy8sdZB\",\"components_affix.md\":\"q2WWgWAm\",\"components_alert.md\":\"EzvdKauv\",\"components_empty.md\":\"Iqk9Sbur\",\"components_notice.md\":\"_NAs6-A7\",\"components_calendar.md\":\"JigwWurO\",\"components_message-box.md\":\"fCCAsymk\",\"components_rate.md\":\"9KkdoNnr\",\"components_loading-bar.md\":\"tkY5C0GZ\",\"components_divider.md\":\"IS1ZOnvq\",\"components_collapse.md\":\"0u5rpv51\",\"components_layout.md\":\"ODBV3zhY\",\"components_drawer.md\":\"CrRyiXyC\",\"components_anchor.md\":\"s14wXJS8\",\"components_scrollbar.md\":\"6vQ32Hdn\",\"components_popover.md\":\"wYQmpkgs\",\"components_message.md\":\"NO65C7hX\",\"components_circle.md\":\"ryx4IdBG\",\"components_popper.md\":\"5Fyiy38Q\",\"components_badge.md\":\"oO7JxteH\",\"components_page.md\":\"kNgnJY-a\",\"components_count-to.md\":\"eHOBDHvp\",\"guide_custom-theme.md\":\"n1FWcWco\",\"guide_common-directive.md\":\"nT9B4UFj\",\"components_slider.md\":\"DI2RI7Rr\",\"components_progress.md\":\"eFjRj96_\",\"components_checkbox.md\":\"7F5dha0P\",\"guide_changelog.md\":\"0yWmpxcB\",\"guide_jsx.md\":\"8hwr5r-5\",\"components_split.md\":\"wUEP-Ht5\",\"components_icon.md\":\"dZIqeyJA\",\"guide_common-transition.md\":\"MscjPGVR\",\"guide_installation.md\":\"j6S0f9nJ\",\"components_switch.md\":\"vcak84L_\",\"components_config-provider.md\":\"nBaHjQiX\",\"components_carousel.md\":\"NtUqJ85A\",\"components_select.md\":\"0rxZmlt4\",\"index.md\":\"soxSuBHK\",\"guide_introduction.md\":\"2mVny5Oj\",\"components_upload.md\":\"U3QoNCTf\",\"guide_usage-sfc.md\":\"rW-UMWov\",\"components_dropdown.md\":\"51EVo7GJ\",\"components_button.md\":\"rxuz04JE\",\"components_modal.md\":\"4bWdPtB_\",\"components_skeleton.md\":\"v-GES9KU\",\"guide_color-design.md\":\"cVmivjOg\",\"guide_import-on-demand.md\":\"t0iAz-CI\",\"components_loading.md\":\"DGAeDdDQ\",\"components_input-number.md\":\"2tw-2fEx\",\"components_timeline.md\":\"Py8dhkSr\",\"components_space.md\":\"qly7dGS4\",\"components_steps.md\":\"Nje8YnTW\",\"components_time-picker.md\":\"zWM_dqXm\",\"components_radio.md\":\"Nt3d-szh\",\"components_grid.md\":\"h2dg77Kz\",\"components_color-picker.md\":\"vP55BNVo\",\"components_tooltip.md\":\"y5xaDDhE\",\"components_menu.md\":\"7c_ihj_r\",\"components_tag.md\":\"U2sf24zV\",\"components_input.md\":\"dJc4_w-S\",\"components_tabs.md\":\"aWS6wiSt\",\"components_date-picker.md\":\"9ogHh5Jw\",\"guide_common-css.md\":\"uhWWbi3e\",\"components_cascader.md\":\"Qiv-ax3R\",\"components_form.md\":\"oq_ykolk\",\"guide_common-api.md\":\"ctudm0v6\",\"components_tree.md\":\"LtXYhey_\",\"components_table.md\":\"ZqShECt8\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"FEI-UI-DESIGN\",\"description\":\"A VitePress site\",\"base\":\"/fei-ui-design/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/gumingWu/vitepress-fun\"}],\"repo\":\"ymf-930/fei-ui-design\",\"docsDir\":\"/docs\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"text\":\"组件\",\"link\":\"/fei-ui-design/components/button\"}],\"locales\":{\"/\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/fei-ui-design/\"},{\"text\":\"Document\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"Getting Started\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"Components\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/\":[{\"title\":\"介绍\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"快速上手\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"指南\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"通用组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"布局组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"数据录入组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"数据展示组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"导航组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"反馈组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"内置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"配置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}},\"/es/\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/fei-ui-design/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"介绍\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"快速开始\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"组件\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"组件\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/es/\":[{\"title\":\"Introduce\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"Get Started\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"Guide\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"Common Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"Layout Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"Data entry component\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"Data display Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"Navigation Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"Feedback Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"Built-in Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"Configure Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/es/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}}},\"lastUpdated\":true,\"lastUpdatedText\":\"最后更新\",\"linkPrevVersion\":\"https://lusaxweb.github.io/vuesax/\",\"searchPlaceholder\":\"Search\"},\"locales\":{\"/\":{\"lang\":\"zh-CN\",\"text\":\"中文\"},\"/es/\":{\"lang\":\"en-US\",\"text\":\"English\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>